<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  provide,
  watch,
  nextTick,
} from "vue";
import { set, get } from "@/utils/index.ts";
import socket from "@/utils/socket.ts";
import { useStore } from "vuex";
import { Notify } from "vant";
import { useRoute } from "vue-router";

let route = useRoute();
const store = useStore();
let themeVars = reactive({
  indexBarIndexActiveColor: "#07c160",
  indexAnchorStickyTextColor: "#07c160",
  rateIconFullColor: "#07c160",
  sliderBarHeight: "4px",
  sliderButtonWidth: "20px",
  sliderButtonHeight: "20px",
  sliderActiveBackgroundColor: "#07c160",
  buttonPrimaryBorderColor: "#07c160",
  buttonPrimaryBackgroundColor: "#07c160",
  tabbarItemActiveColor: "#07c160",
});

window.onload = function () {
  document.addEventListener("touchstart", function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });

  var lastTouchEnd = 0;

  document.addEventListener(
    "touchend",
    function (event) {
      var now = new Date().getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    },
    false
  );

  document.addEventListener("gesturestart", function (event) {
    event.preventDefault();
  });
};

const log = console.log;
// 开启连接
provide("socket", socket);
watch(
  () => store.state.token,
  (res) => {
    if (res) {
      console.log(21);

      socket.init(import.meta.env.VITE_API_URL, get("token"));
      // 接收在线用户信息
      socket.socket.on("online", ({ users }) => {
        log("#online,", users);
        users.forEach((users) => {
          Notify({ type: "success", message: `${users.userName}上线了!` });
        });

        store.commit("setOnline", users);
      });
    } else {
      socket.socket && socket.close();
    }
  },
  {
    immediate: true,
  }
);

onBeforeUnmount(() => {
  socket.socket && socket.close();
});

// if (socket != null) {
//   socket.close();
// }

// socket.on("connect", () => {
//   const id = socket.id;

//   log("#connect,", id, socket);

//   // 监听自身 id 以实现 p2p 通讯
//   socket.on(id, (msg) => {
//     log("#receive,", msg);
//   });
// });

// // 接收在线用户信息
// socket.on("online", ({ users }) => {
//   log("#online,", users);
//   store.commit("setOnline", users);
// });

// // 系统事件
// socket.on("disconnect", (msg) => {
//   log("#disconnect", msg);
// });

// socket.on("disconnecting", () => {
//   log("#disconnecting");
// });

// socket.on("error", () => {
//   log("#error");
// });
</script>

<template>
  <van-config-provider :theme-vars="themeVars">
    <transition name="van-fade">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component
            :key="$route.path"
            :is="Component"
            v-if="route.meta.keepAlive"
          />
        </keep-alive>
        <component
          :key="$route.path"
          :is="Component"
          v-if="!route.meta.keepAlive"
        />
      </router-view>
    </transition>
  </van-config-provider>
</template>

<style>
.iconfont {
  font-size: 62px !important;
}
html,
body,
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  /* overflow: auto; */
  background: var(--main-color);
}
* {
  box-sizing: border-box;
}

:root {
  --van-white: #fff;
  --van-blue: #1989fa;
  --main-color: #f7f8fa;
  --van-cell-vertical-padding: 25px;
  --search-bgColor: var(--van-white);
  --contac-card-bg: var(--van-white);
  /* --van-button-primary-color: var(--van-white);
  --van-button-primary-background-color: var(--van-primary-color); */
}
.main {
  /* margin-top: 92px; */
}

.spac {
  margin-top: 20px;
}

.van-popup {
  max-width: 600px;
  font-size: 42px;
}
.van-popover__content {
  padding: 20px;
  word-wrap: break-word;
}
.van-popup--top {
  max-width: unset;
}

.van-popup {
  max-width: unset;
}
.van-swipe__track {
  width: 100%;
}
.van-config-provider {
  width: 100%;
  height: 100%;
}
</style>
